<template>
  <video ref="videoElement" :width="width" controls autoplay>
    Your browser is too old which doesn't support HTML5 video.
  </video>
</template>

<script>
import flvjs from "flv.js"
export default {
  props: {
    id: {
      type: Number,
      default: 0
    },
    rtsp: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '200'
    },
  },
  data () {
    return {
      flvPlayer: null
    }
  },
  mounted () {
    if (flvjs.isSupported()) {
      let videoElement = this.$refs.videoElement
      this.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`,
        isLive: true,
        cors: true
      })
      this.flvPlayer.attachMediaElement(videoElement)
      this.flvPlayer.load()
      this.flvPlayer.play()
    }
  },
  beforeDestroy () {
    this.flvPlayer.pause()
    this.flvPlayer.unload()
    this.flvPlayer.detachMediaElement()
    this.flvPlayer.destroy()
    this.flvPlayer = null
  }
}
</script>